<template>
  <div class="main">
    <div class="input">
      <input type="text" placeholder="请输入城市名称" v-model="city" @input="searchCity()">
    </div>
    <router-link :to="{path:'/list',query:{text:city} }"><div v-if="city.length>0" class="tip"><span style="margin:5px">{{city}}</span></div></router-link>
    <h2 class="text-center" v-if="!storedDataWeather">
      暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
    </h2>
    <div class="list" v-for="item,index in storedDataWeather" :key="index" v-else>
    <span class="city">{{item.city}}</span>  <span class="tem">{{item.temperature}}度</span>
    <div class="btn" >  <router-link :to="{path:'/list',query:{text:item.city} }"><button class="btn-son">查看</button></router-link>
     <button class="btn-son"  @click="deleteItem(index)">删除</button></div>
    </div>
    <h2 class="text-left">近期天气</h2>
    <div class="chart">
      <div class="weatherText">
        <div class="flex" v-if="weatherData.length > 0" >
          <span>今日</span>
          <span>{{weatherData[0].date}}</span>
          <span>{{weatherData[0].dayWeather}}</span>
          <span>风力{{weatherData[0].dayWindPower}}级</span>
        </div>
        <div class="flex" v-if="weatherData.length > 0" >
          <span>明日</span>
          <span>{{weatherData[1].date}}</span>
          <span>{{weatherData[1].dayWeather}}</span>
          <span>风力{{weatherData[1].dayWindPower}}级</span>
        </div>
        <div class="flex" v-if="weatherData.length > 0" >
          <span>周{{weatherData[2].week}}</span>
          <span>{{weatherData[2].date}}</span>
          <span>{{weatherData[2].dayWeather}}</span>
          <span>风力{{weatherData[2].dayWindPower}}级</span>
        </div>
        <div class="flex" v-if="weatherData.length > 0" >
          <span>周{{weatherData[3].week}}</span>
          <span>{{weatherData[3].date}}</span>
          <span>{{weatherData[3].dayWeather}}</span>
          <span>风力{{weatherData[3].dayWindPower}}级</span>
        </div>
      </div>
      <div class="weatherChart">
       <v-echarts :option="option"/>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {reactive, watch,ref,inject} from 'vue'
import {getCitySuggestions} from '../../API/index.js'
export default {
setup(){
  //接收传递的数据
  const cityName = inject('city',[])
  const cityTemp = inject('Temp',[])

  //获取城市名称
  const city = ref('');
  const suggestions = ref([]);
  const showSuggestions = ref(false);
  const searchCity = async () => {
    try {
      const data = await getCitySuggestions(city.value);
      suggestions.value = data;
      } catch (error) {
        console.log(error);
      }
    };

  //接收传递过来的天气数据
  const storedDataStringWeather = localStorage.getItem('showListWeather');
  const storedDataWeather = ref(JSON.parse(storedDataStringWeather))
  console.log(storedDataWeather,8888);

 //删除按钮的实现
  const deleteItem = (index) => {
    if(storedDataWeather){
    storedDataWeather.value.splice(index, 1);
     localStorage.setItem('showListWeather', JSON.stringify(storedDataWeather.value)); 
    }
  };

 //天气图表
  const option = ref(null)
  const chart = ref(null)
  const renderCharts = (data1,data2)=>{
    option.value={
       xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false,
          min:20,
          max:50,
        },
        grid:{
          top:10,
          left:'12%',
          right:'12%',
        },
        series:[
          {
            name:'series1',
            type:'line',
            data:data1,
            label: {
            show: true,
            formatter: '白:{c}', 
            position: 'top', 
            color:'white',
            }
          },
          {
            name:'series2',
            type:'line',
            data:data2,
            label: {
            show: true,
            formatter: '晚:{c}',
            position: 'bottom',
            color:'white',
            }
          }
        ]
    };
    if (chart.value) {
      chart.value.setOption(option.value);
    }
  }
  //获取高德天气数据
  const weatherData = reactive([])
  window._AMapSecurityConfig = {
  securityJsCode: '23d45164cfc2f815f5b659ab29f2b927',
  }
    AMapLoader.load({
    key: '2f13fbf16769972e3a8f7b24bbc3f8de',
    version: '2.0',
  }).then((AMap) => {
    console.log('AMap :>> ', AMap);
      // 创建天气查询实例
      AMap.plugin('AMap.Weather', () => {
        const weather = new AMap.Weather();

        // 获取城市预报的天气信息
        weather.getForecast('武汉市', (error, data) => {
          if (error) {
            console.error('Failed to get weather data:', error);
          } else {
            weatherData.splice(0, weatherData.length, ...data.forecasts);
          }
        });
      });
    }).catch((error) => {
      console.error('Failed to load AMap:', error);
    });
     watch(weatherData, (newValue) => {
      renderCharts(newValue.map(item => item.dayTemp),newValue.map(item => item.nightTemp))
    });
  return{
    weatherData,
    option,
    renderCharts,
    chart,
    city, 
    suggestions, 
    showSuggestions, 
    searchCity,
    storedDataWeather,
    deleteItem,
  }
  
}
}
</script>

<style scoped>
.main{
  background-color: rgb(0,102,138);
  width: 100%;
  height: 635px;
  padding-left: 10rem;
  padding-right: 10rem;
  box-sizing: border-box;
}
.main .input{
  width: 1200px;
  height: 56.8px;
  background-color: rgb(0,102,138);
  padding-top: 1rem;
  margin-bottom: 2rem;
  box-sizing: border-box;
}
.main .input input:focus {
  outline: none;
  box-shadow:-5px 0 3px rgba(0, 0, 0, 0.2), 5px 0 3px rgba(0, 0, 0, 0.2), 0 5px 3px rgba(0, 0, 0, 0.2);
  border-bottom-color: transparent;
}

.main .input input{
  width: 1200px;
  height: 40.8px;
  background-color: rgb(0,102,138);
  border: none;
  border-bottom: 1px solid white;
  font-size: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  box-sizing: border-box;
  color: white;
} 
.main .input input::placeholder{
  color: rgb(187, 183, 183);
}
.text-center{
  text-align: center;
  font-size: inherit;
  font-weight: inherit;
  color: white;
}
.text-left{
  font-size: inherit;
  font-weight: inherit;
  color: white; 
  margin-top: 1.5rem;
}
.chart{
  width: 1200px;
  height: 384px;
  margin-top: 0.5rem;
  background: rgb(0,78,113);
  padding-top: 2.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
}
.weatherText{
  width: 100%;
  height: 144px;
  gap: 1.5rem;
  display: flex;
  justify-content: space-around;
}
.weatherText .flex{
  display: flex;
  width: 258px;
  height: 100%;
  text-align: center;
  gap: 1rem;
  flex-direction: column;
  color: white;
}
.weatherChart{
  margin-top: 2.5rem;
  height: 10rem;
}
.tip{
  width:100%; 
  height:55px; 
  background-color:rgb(0,78,113);
  margin-top: -25px;
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
}
.tip:hover{
  cursor: pointer;
}
.list{
  width: 100%;
  height: 40px;
  background-color: rgb(0,78,113);
  margin-bottom: 0.5rem;
  color: white;
  display: flex;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  align-items: center;
  margin-top: 5px;
}
.list:hover{
  width: 80%;
  transition: all 0.1s;
}
.btn{
  position:absolute;
  left: 1200px;
  opacity: 0;
  transition: opacity 0.1s ease;
  
}
.btn .btn-son{
  width: 80px;
  height: 40px;
  background-color: rgb(192, 166, 16);
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}
.list:hover  .btn {
 opacity: 1; /* 鼠标移入时显示按钮 */
 
}
</style>